<template>
  <!-- 导航栏 -->
  <van-nav-bar
    :title="TypeName"
    left-text="返回"
    left-arrow
    fixed
    z-index="1000"
    placeholder
    @click-left="back"
    @click-right="SearchShow = true"
  >
    <template #right>
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>

  <!-- 下拉菜单 -->
  <van-sticky :offset-top="46">
    <van-dropdown-menu>
      <van-dropdown-item
        @change="TypeToggle"
        v-model="TypeActive"
        :options="TypeList"
      />
      <van-dropdown-item
        @change="FlagToggle"
        v-model="FlagActive"
        :options="FlagList"
      />
      <van-dropdown-item
        @change="SortToggle"
        v-model="SortActive"
        :options="SortList"
      />
      <van-dropdown-item
        @change="ByToggle"
        v-model="ByActive"
        :options="ByList"
      />
    </van-dropdown-menu>
  </van-sticky>

  <!-- 下拉刷新 -->
  <van-pull-refresh v-model="refreshing" @refresh="refresh">
    <!-- 加载列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :offset="10"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="load"
    >
      <ul class="proul" v-if="list">
        <li v-for="(item, index) in list" :key="index">
          <router-link :to="{ path: '/product/info', query: { proid: item.id } }">
            <van-image
              width="100%"
              height="230"
              fit="cover"
              :src="item.thumbs_text"
            ></van-image>
          </router-link>
          <router-link :to="{ path: '/product/info', query: { proid: item.id } }">
            <p class="tit">
              {{ item.name }}
            </p>
          </router-link>
          <div class="price">
            <p>￥{{ item.price }} / {{ item.unit_text }}<span>￥8999</span></p>
          </div>
        </li>
      </ul>
    </van-list>
  </van-pull-refresh>

  <!-- 回到顶部 -->
  <van-back-top bottom="10vh" />

  <!-- 搜索 -->
  <van-popup v-model:show="SearchShow" position="top">
    <van-search
      v-model="keywords"
      placeholder="请输入关键词"
      @search="search"
    ></van-search>
  </van-popup>

  <tabbar />
</template>
<script setup>
import { getCurrentInstance, onBeforeMount } from "vue";
import tabbar from "@/components/common/tabbar.vue";

const { proxy } = getCurrentInstance();

let TypeList = reactive([{ text: "全部分类", value: "0" }]);

let FlagList = [
  { text: "全部商品", value: "0" },
  { text: "新品", value: "1" },
  { text: "热销", value: "2" },
  { text: "推荐", value: "3" },
];

let SortList = [
  { text: "按上架时间", value: "createtime" },
  { text: "按价格", value: "price" },
  { text: "按库存", value: "stock" },
];

let ByList = [
  { text: "降序", value: "desc" },
  { text: "升序", value: "asc" },
];

let TypeActive = ref("0");
let FlagActive = ref("0"); //标志 1-新品 2-热销 3-推荐
let SortActive = ref("createtime"); //排序 上架时间 价格 库存
let ByActive = ref("desc"); //desc 降序 asc 升序
let SearchShow = ref(false);
let keywords = ref(""); //搜索关键词
let TypeName = ref("全部分类"); //标题栏分类信息

let list = ref([]); //数据列表
let page = ref(1); //分页
let loading = ref(false); //加载状态
let finished = ref(false); //是否无更多数据
let refreshing = ref(false); //下拉刷新

// 生命周期
onBeforeMount(async () => {
  type();
  refresh();
});

//分类查询
const type = async () => {
  var result = await proxy.$POST({
    url: "product/type",
  });
  if (result.code == 0) {
    proxy.$fail(result.msg);
    return;
  }

  result.data.map((item) => {
    TypeList.push({ text: item.name, value: item.id });
  });
};

const back = () => proxy.$router.go(-1);

// 搜索事件
const search = async () => {
  SearchShow.value = false;
  refreshing.value = true;

  //触发刷新效果
  refresh();
};

//分类切换
const TypeToggle = async (value) => {
  refreshing.value = true;
  TypeActive.value = value;
  refresh();
};

//属性切换
const FlagToggle = async (value) => {
  refreshing.value = true;
  FlagActive.value = value;
  refresh();
};

//排序切换
const SortToggle = async (value) => {
  refreshing.value = true;
  SortActive.value = value;
  refresh();
};

//升降序切换
const ByToggle = async (value) => {
  refreshing.value = true;
  ByActive.value = value;
  refresh();
};

//下拉刷新
const refresh = async () => {
  // 清空查询参数
  page.value = 1;
  list.value = [];
  refresh.value = false;
  loading.value = true;

  // 加载数据方法
  load();
};

//商品列表
const load = async () => {
  if (refreshing.value) {
    refreshing.value = false;
  }
  //组装数据
  var params = {
    typeid: TypeActive.value,
    flag: FlagActive.value,
    sort: SortActive.value,
    by: ByActive.value,
    keywords: keywords.value,
    page: page.value,
  };

  //发送请求
  var result = await proxy.$POST({
    url: "product/index",
    params,
  });

  //请求发送完毕后，加载状态也就完毕了
  loading.value = false;

  //如果没有更多数据了 就说明已经加载到底了....
  if (result.code == 0) {
    finished.value = true;
    return;
  }

  TypeName.value = result.data.TypeName;
  list.value = list.value.concat(result.data.list);
  page.value++;
};
</script>